<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>人员信息表</title>
    <!--    <link rel="stylesheet" type="text/css" href="/plugin/themes/default/easyui.css">-->
    <link rel="stylesheet" type="text/css" href="plugin/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="plugin/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="plugin/themes/color.css">
    <link rel="stylesheet" type="text/css" href="plugin/demo/demo.css">
    <script type="text/javascript" src="plugin/jquery.min.js"></script>
    <script type="text/javascript" src="plugin/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="plugin/locale/easyui-lang-zh_CN.js"></script>

    <!--拼音插件-->
    <script src="https://cdn.jsdelivr.net/gh/zh-lx/pinyin-pro@latest/dist/pinyin-pro.js"></script>

    <!--输入框样式-->
    <style>
        #form1 input {
            width: 170px;
            border: 1px #0c7cd5 solid;
            border-radius: 4px;
            outline: none;
            height: 28px;
            margin-top: 3px;
        }
    </style>
</head>
<body>
<!--表头按钮-->
<div id="btns1">
    <a href="#" class="easyui-linkbutton" plain="true">添加</a>
    <a href="#" class="easyui-linkbutton" plain="true">修改</a>
    <a href="#" class="easyui-linkbutton" plain="true">删除</a>
    <a href="#" class="easyui-linkbutton" plain="true">下载Excel模板</a>
    <a href="#" class="easyui-linkbutton" plain="true">导入</a>
    <a href="#" class="easyui-linkbutton" plain="true">导出Excel</a>
    <a href="#" class="easyui-linkbutton" plain="true">全部数据导出到Excel</a>

    <input type="text" style="width: 300px" name="keyword" id="keyword"/>
    <div id="mm" style="width:120px">
        <div data-options="name:'name',iconCls:'icon-ok'">姓名</div>
        <div data-options="name:'idNo',iconCls:'icon-ok'">身份证号</div>
        <div data-options="name:'mobilePhone',iconCls:'icon-ok'">手机号</div>
        <div data-options="name:'email',iconCls:'icon-ok'">电子邮箱</div>
    </div>

</div>

<!--上传文件-->
<div id="upload">
    <form id="form2" method="post" enctype="multipart/form-data">
        <!--<input name="upp" id="fb" type="file">-->
        <input name="excelFile" id="fb" type="text" style="width:300px">
    </form>
</div>

<!--确认上传按钮-->
<div id="btns3">
    <a href="#" class="easyui-linkbutton">上传</a>
</div>

<!--确认按钮-->
<div id="btns2">
    <a href="#" class="easyui-linkbutton">保存</a>
    <a href="#" class="easyui-linkbutton">取消</a>
</div>

<!--表格-->
<table id="d_p" style="width:1200px;height:800px">
    <thead>
    <tr>
        <th data-options="field:'id',width:150,checkbox:true">用户id</th>
        <th data-options="field:'name',width:120">姓名</th>
        <th data-options="field:'fullNameSpelling',width:140">姓名全拼</th>
        <th data-options="field:'gender',width:60">性别</th>
        <th data-options="field:'idCardType',width:80">身份证类型</th>
        <th data-options="field:'idNo',width:150">身份证号码</th>
        <th data-options="field:'birthDate',width:80">出生日期</th>
        <th data-options="field:'mobilePhone',width:140">手机号码</th>
        <th data-options="field:'email',width:150">电子邮箱</th>
    </tr>
    </thead>
</table>

<!--form表单-->
<div id="d_add" align='center'>
    <form id="form1">
        <table>
            <td><input type="hidden" name="id" id="id"></td>
            <tr>
                <td>姓名:</td>
                <td><input type="text" name="name" id="name" class="easyui-validatebox dir-textbox"
                           data-options="required:true" missingMessage="请输入姓名" oninput="getValue()"></td>
            </tr>
            <tr>
                <td>姓名全拼:</td>
                <td><input type="text" name="fullNameSpelling" id="fullNameSpelling"></td>
            </tr>
            <tr>
                <td>性别:</td>
                <td><input type="text" name="gender" id="gender" data-options="editable:false"></td>
            </tr>
            <tr>
                <td>身份证类型:</td>
                <td><input type="text" name="idCardType" id="idCardType" data-options="editable:false"></td>
            </tr>
            <tr>
                <td>身份证号码:</td>
                <td><input type="text" name="idNo" id="idNo" maxlength="18" class="easyui-validatebox dir-textbox"
                           data-options="required:true" missingMessage="请输入身份证号"></td>
            </tr>
            <tr>
                <td>出生日期:</td>
                <td><input type="text" name="birthDate" id="birthDate" class="easyui-datebox" width="170px"
                           class="easyui-validatebox dir-textbox" data-options="editable:false">
                </td>
            </tr>
            <tr>
                <td>手机号:</td>
                <td><input type="text" name="mobilePhone" id="mobilePhone" maxlength="11"
                           class="easyui-validatebox dir-textbox"
                           data-options="required:true" missingMessage="请输入手机号" validType='mobilePhoneNum'></td>
            </tr>
            <tr>
                <td>电子邮箱:</td>
                <td><input type="text" name="email" id="email" class="easyui-validatebox dir-textbox"
                           data-options="required:true" missingMessage="请输入邮箱" validType='emailll'></td>
            </tr>
        </table>
    </form>
</div>

<script>

    //校验
    $.extend($.fn.validatebox.defaults.rules, {
        mobilePhoneNum: { //验证手机号
            validator: function (value, param) {
                return /^1[3-8]+\d{9}$/.test(value);
            },
            message: '请输入正确的手机号码。'
        },
        emailll: { //验证电子邮箱
            validator: function (value, param) {
                return /^[0-9a-zA-Z]+@(([0-9a-zA-Z]+)[.])+[a-z]{2,4}$/i.test(value);
            },
            message: '邮箱格式错误。'
        }
    });


    /*文件上传框*/
    $("#upload").dialog({
        title: "文件上传",
        buttons: '#btns3', //引用按钮到页  面中
        closed: true,  //初始隐藏
    });

    //表单样式
    $("#d_add").dialog({
        width: 270,
        // iconCls: "icon-ok",
        buttons: '#btns2', //引用按钮到页面中
        closed: true,  //初始隐藏
    });

    $('#d_p').datagrid({loadFilter: pagerFilter}).datagrid({
        onLoadSuccess: function (data) {
            $('#d_p').datagrid('fixRownumber');
        },
        url: 'person/list',     //加载数据
        method: 'GET',
        pagination: true,
        title: "人员信息表",
        iconCls: "icon-ok",
        toolbar: '#btns1', //引用按钮到页面中
        rownumbers: true, //显示行号
        checkOnSelect: true, //fales只有当用户选中复选框才能选中
        fitColumns: true,  //数据适应宽度
        singleSelect: false,  //只允许选中一行
        selectOnCheck: true, //true勾选会选择行，false勾选不选择行, 1.3以后有此选项。重点在这里
        pageSize: 20,
        pageList: [10, 20, 30, 40, 50, 100] //自定义每页多少数据展示
    });

    // 分页数据的操作
    function pagerFilter(data) {
        if (typeof data.length == 'number' && typeof data.splice == 'function') {   // is array
            data = {
                total: data.length,
                rows: data,
            }
        }
        var dg = $(this);
        var opts = dg.datagrid('options');
        var pager = dg.datagrid('getPager');
        pager.pagination({
            onSelectPage: function (pageNum, pageSize) {
                opts.pageNumber = pageNum;
                opts.pageSize = pageSize;
                pager.pagination('refresh', {
                    pageNumber: pageNum,
                    pageSize: pageSize
                });
                dg.datagrid('loadData', data);
            },
            onRefresh: function () {
                // $("#keyword").searchbox('setValue', '');
                $("#d_p").datagrid('reload');
            }
        });
        if (!data.originalRows) {
            data.originalRows = (data.rows);
        }
        var start = (opts.pageNumber - 1) * parseInt(opts.pageSize);
        var end = start + parseInt(opts.pageSize);
        data.rows = (data.originalRows.slice(start, end));
        return data;
    }

    //确认上传按钮
    $("#btns3>a:contains(上传)").linkbutton({
        iconCls: "icon-ok",
        onClick: function () {
            //获取文件
            var formData = new FormData($('#form2')[0])
            $.ajax({
                url: 'person/upload',
                type: 'post',
                async: false,
                data: formData,		//上传到后台的文件
                processData: false,	// 告诉jQuery不要去处理发送的数据
                contentType: false,	// 告诉jQuery不要去设置Content-Type请求头
                beforeSend: function () {
                    console.log('正在进行，请稍候')
                },
                success: function (res) {
                    if (res) {
                        $.messager.alert("温馨提示", res.message, "info");
                        $("#upload").dialog({closed: true})
                        //重新刷新页面
                        $("#d_p").datagrid("reload");
                    }
                },
                error: function (res) {
                    $.messager.alert("警告", res.message, "info");
                }

            })
        }
    });

    //确认按钮
    $("#btns2>a:contains(保存)").linkbutton({
        iconCls: "icon-ok",
        onClick: function () {
            var id = $("#id").val();
            //console.log("修改的id的值为:" + id);
            var formObjiect = {};
            var formArray = $("#form1").serializeArray();

            $.each(formArray, function (i, item) {
                formObjiect[item.name] = item.value;
            })
            if (id == "" || id == null) {
                if ($("#name").val() == null || $("#name").val() == "" ||
                    $("#idNo").val() == null || $("#idNo").val() == "" ||
                    $("#mobilePhone").val() == null || $("#mobilePhone").val() == ""
                ) {
                    alert("必填项不能为空,请您填写完整^_^");
                } else {
                    //添加
                    $.ajax({
                        dataType: "json",
                        type: "post",
                        contentType: "application/json; charset=utf-8",
                        url: "/person/addNew",
                        data: JSON.stringify(formObjiect),
                        success: function (result) {
                            $.messager.alert("温馨提示", result.message, "info");
                            //操作后隐藏表单
                            $("#d_add").dialog({
                                closed: true,  //初始隐藏
                            });
                            //重新刷新页面
                            //history.go(0);
                            $("#d_p").datagrid("reload");
                        },
                        error: function (result) {
                            $.messager.alert("温馨提示", result.message, "info");
                        }
                    });
                }
            } else {
                //修改
                //发送请求
                $.ajax({
                    url: 'person/update/' + id,
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    data: JSON.stringify(formObjiect),
                    success: function (result) {
                        $.messager.alert("温馨提示", "更新用户信息成功", "info");
                        //操作后隐藏表单
                        $("#d_add").dialog({closed: true,});
                        //后重新刷新页面
                        //history.go(0);
                        $("#d_p").datagrid("reload");
                    },
                    error: function () {
                        $.messager.alert("温馨提示", "更新用户信息失败", "info");
                    }
                });
            }

        }
    });
    //取消按钮
    $("#btns2>a:contains(取消)").linkbutton({
        iconCls: "icon-cancel",
        onClick: function () {
            //操作后隐藏表单
            $("#d_add").dialog({closed: true,});
            /*//后重新刷新页面
            //history.go(0);
            $("#d_p").datagrid({url: 'person/list',});*/
        }
    })

    //表头按钮样式
    $("#btns1>a:contains(添加)").linkbutton({
        iconCls: "icon-add",
        /*点击添加按钮的事件*/
        onClick: function () {
            //点击添加按钮表单的清空值
            $("#form1 input").val("");
            //修改表单样式
            $('#d_add').dialog({
                title: '添加用户信息',
                closed: false,
            });
        }
    });

    /*获取姓名的拼音*/
    var {pinyin} = pinyinPro;

    function getValue() {
        // 获取input输入框的值
        var value = document.getElementById("name").value;
        var pinyin1 = pinyin(value, {toneType: 'none'});
        $("#fullNameSpelling").val(pinyin1);
    }

    $("#btns1>a:contains(删除)").linkbutton({
        iconCls: "icon-remove",

        onClick: function () {

            var ids = [];
            var rows = $('#d_p').datagrid("getSelections");
            for (var i = 0; i < rows.length; i++) {
                ids.push(rows[i].id);
            }

            //如果数组长度大于0,则删除
            if (ids.length > 0) {
                $.messager.confirm("警告", "确认删除所有选中的吗?", function (r) {
                    if (r) {
                        $.ajax({
                            url: 'person/delete/' + ids,
                            dataType: "json",
                            type: "POST",
                            contentType: "application/json; charset=utf-8",
                            // data: JSON.stringify(as),
                            success: function (result) {
                                $.messager.alert("温馨提示", result.message, "info");
                                //操作后重新请求刷新页面
                                $("#d_p").datagrid("reload");
                            },
                            error: function (result) {
                                $.messager.alert("温馨提示", result.message, "info");
                                alert("异常！");
                            }
                        });
                    }
                })

            } else {
                $.messager.alert("温馨提示", "请选择用户信息后进行删除", "info");
            }
        }
    });
    $("#btns1>a:contains(修改)").linkbutton({
        iconCls: "icon-edit",
        onClick: function () {
            //获取行数据
            var rows = $("#d_p").datagrid('getSelections');
            if (rows < 1) {
                $.messager.alert("温馨提示", "请选择用户信息后进行修改", "info");
            } else if (rows.length == 1) {
                /*显示修改页面*/
                $("#d_add").dialog({closed: false, title: '修改用户信息'});
                //回显数据
                $('#id').val(rows[0].id);
                $('#name').val(rows[0].name);
                $('#fullNameSpelling').val(rows[0].fullNameSpelling);
                $('#gender').combobox('setValue', rows[0].gender);
                $('#idCardType').combobox('setValue', rows[0].idCardType);
                $('#idNo').val(rows[0].idNo);
                $('#birthDate').datebox('setValue', rows[0].birthDate);
                $('#mobilePhone').val(rows[0].mobilePhone);
                $('#email').val(rows[0].email);
            } else {
                $.messager.alert("温馨提示", "请选择单行用户信息后进行修改", "info");
            }
        }
    });
    $("#btns1>a:contains(下载Excel模板)").linkbutton({
        iconCls: "icon-ok",
        onClick: function () {
            $.messager.confirm("温馨提示", "确认下载excel模板?", function (r) {
                if (r) {
                    $.ajax({
                        url: '/person/downloadExcelTemplate',
                        type: 'get',
                        success: function () {
                            window.location.href = "http://localhost:8083/person/downloadExcelTemplate";
                            $.messager.alert("温馨提示", "下载excel模板成功", "info");
                        },
                        error: function () {
                            $.messager.alert("温馨提示", "下载excel模板失败", "info");
                        }
                    })
                }
            })

        }
    });
    $("#btns1>a:contains(导入)").linkbutton({
        iconCls: "icon-back",
        onClick: function () {
            $("#upload").dialog({closed: false});
        }
    });
    $("#btns1>a:contains(导出Excel)").linkbutton({
        iconCls: "icon-save",
        onClick: function () {
            var ids = [];
            var rows = $('#d_p').datagrid("getSelections");
            for (var i = 0; i < rows.length; i++) {
                ids.push(rows[i].id);
            }
            if (ids.length > 0) {
                $.messager.confirm("警告", "确认导出Excel所有选中的吗?", function (r) {
                    if (r) {
                        $.ajax({
                            url: '/person/exportExcel/' + ids,
                            type: 'get',
                            success: function () {
                                window.location.href = "http://localhost:8083/person/exportExcel/" + ids;
                                $.messager.alert("温馨提示", "导出Excel成功", "info");
                            },
                            error: function () {
                                $.messager.alert("温馨提示", "导出Excel成功", "info");
                            }
                        })
                    }
                })
            } else {
                $.messager.alert("温馨提示", "请选择信息进行导出", "info");
            }
        }
    });

    $("#btns1>a:contains(全部数据导出到Excel)").linkbutton({
        iconCls: "icon-save",
        onClick: function () {
            $.messager.confirm("警告", "确认导出全部数据到Excel吗?", function (r) {
                if (r) {
                    $.ajax({
                        url: '/person/exportExcelAll',
                        type: 'get',
                        success: function () {
                            window.location.href = "http://localhost:8083/person/exportExcelAll";
                            $.messager.alert("温馨提示", "导出全部数据到Excel成功", "info");
                        },
                        error: function () {
                            $.messager.alert("温馨提示", "导出全部数据到Excel失败", "info");
                        }
                    })
                }
            })
        }
    });

    //搜索框选择按钮
    $('#keyword').searchbox({
        menu: '#mm',
        prompt: '请选择并输入查询条件',
        searcher: function (value, name) {
            value = $.trim(value)
            console.log(value);
            if (value == "" || value == null) {
                $.messager.alert("温馨提示", "请输入查询条件", "info");
            }
            if (name == "name") {
                $("#d_p").datagrid({
                    url: 'person/list',
                    method: 'POST',
                    dataType: 'json',
                    contentType: "application/json; charset=utf-8",
                    queryParams: {
                        name: value,
                        fullNameSpelling: '',
                        gender: '',
                        idCardType: '',
                        idNo: '',
                        birthDate: null,
                        mobilePhone: '',
                        email: ''
                    },
                });
            }
            if (name == "idNo") {
                $("#d_p").datagrid({
                    url: 'person/list',
                    method: 'POST',
                    dataType: 'json',
                    contentType: "application/json; charset=utf-8",
                    queryParams: {
                        idNo: value,
                    },
                });
            }
            if (name == "mobilePhone") {
                $("#d_p").datagrid({
                    url: 'person/list',
                    method: 'POST',
                    dataType: 'json',
                    contentType: "application/json; charset=utf-8",
                    queryParams: {
                        mobilePhone: value,
                    },
                });
            }
            if (name == "email") {
                $("#d_p").datagrid({
                    url: 'person/list',
                    method: 'POST',
                    dataType: 'json',
                    contentType: "application/json; charset=utf-8",
                    queryParams: {
                        email: value,
                    },
                });
            }
        },

    })
    ;

    /*文件框*/
    $('#fb').filebox({
        buttonText: '选择文件',
    })

    //性别选框
    $('#gender').combobox({
        width: 170,
        panelHeight: 70,
        valueField: 'id',
        textField: 'gender',
        data: [{
            "gender": '男',
            "id": '男'
        }, {
            "gender": '女',
            "id": '女'
        }]
    });

    //身份证类别选框
    $('#idCardType').combobox({
        width: 170,
        panelHeight: 100,
        valueField: 'id',
        textField: 'idCardType',
        data: [{
            "idCardType": '居民身份证',
            "id": '居民身份证'
        }, {
            "idCardType": '港/澳身份证',
            "id": '港/澳身份证'
        }, {
            "idCardType": '士官证',
            "id": '士官证'
        }]
    });


    //手机号校验
    $.extend($.fn.validatebox.defaults.rules, {
        mobilePhoneNum: { //验证手机号
            validator: function (value, param) {
                return /^1[3-8]+\d{9}$/.test(value);
            },
            message: '请输入正确的手机号码。'
        },

        telNum: { //既验证手机号，又验证座机号
            validator: function (value, param) {
                return /(^(0[0-9]{2,3}\-)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$)|(^((\d3)|(\d{3}\-))?(1[358]\d{9})$)/.test(value);
            },
            message: '请输入正确的电话号码。'
        }
    });

    $.extend($.fn.datagrid.methods, {
        fixRownumber: function (jq) {
            return jq.each(function () {
                var panel = $(this).datagrid("getPanel");
                var clone = $(".datagrid-cell-rownumber", panel).last().clone();
                clone.css({
                    "position": "absolute",
                    left: -1000
                }).appendTo("body");
                var width = clone.width("auto").width();
                if (width > 25) {
                    //多加5个像素,保持一点边距
                    $(".datagrid-header-rownumber,.datagrid-cell-rownumber", panel).width(width + 5);
                    $(this).datagrid("resize");
                    //一些清理工作
                    clone.remove();
                    clone = null;
                } else {
                    //还原成默认状态
                    $(".datagrid-header-rownumber,.datagrid-cell-rownumber", panel).removeAttr("style");
                    $(this).datagrid("resize");
                }
            });
        }
    });

    //输入框必填提示
    /*$('#name').validatebox({required:true});
    $('#fullNameSpelling').validatebox({required:true});
    $('#gender').validatebox({required:true});
    $('#idCardType').validatebox({required:true});
    $('#idNo').validatebox({required:true});
    $('#birthDate').validatebox({required:true});
    $('#mobilePhone').validatebox({required:true});
    $('#email').validatebox({required:true});*/
</script>
</body>

</html>